<template>
  <div class="progress-box">
    <div class="progress-bar">
      <div
        class="progress-cell"
        :style="`height: ${cellHeight};width: ${percent};backgroundImage: linear-gradient(to right, rgba(87, 255, 170) 90%, transparent 10%);backgroundSize: ${size};`"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressBar',
  props: {
    cellHeight: {
      type: String,
      required: true
    },
    size: {
      type: String,
      required: true
    },
    percent: {
      type: String,
      required: true
    }

  },
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
.progress-box {
  margin-top: 25px;
  border: 0.0625rem solid $green;
}

.progress-bar {
  margin: 0.0625rem;
  // .progress-cell {
  // }
}
</style>
